import React from 'react';

// JSX - 列表渲染 map

// 食物列表
const foods = [
  { id:1, name:'牛排', price: 99 },
  { id:2, name:'鸡排', price: 199 },
  { id:3, name:'鸭排', price: 199 },
];
// map 把数组映射成 JSX 列表

function App() {
  return (
    <div className="App">
      {/* { foods } */}
      <ul>
        {/* { foods.map((item,index)=>{
          return <li key={index}>食物名称：{item.name}，价格是：{item.price}</li>
        }) } */}

        {/* React 列表渲染常见简化写法 */}
        { foods.map((v,i)=><li key={i}>食物名称：{v.name}，价格是：{v.price}</li>) }

      </ul>
    </div>
  );
}
export default App;
